<template>
  <!--  标识范围 -->
  <div id="app-container">
    <el-form label-width="130px">
      <el-form-item label="书名">
        <el-col :span="5">
          <el-input v-model="book.bookName"/>
        </el-col>
      </el-form-item>
      <el-form-item label="作者">
        <el-col :span="5">
          <el-input v-model="book.author"/>
        </el-col>
      </el-form-item>
      <!-- TODO 分类 -->
      <el-form-item label="一级分类">
        <el-select @change="getSecondCategoryList" v-model="book.isFirstType" placeholder="请选择">
          <el-option
            v-for="item in firstCategoryList"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select  v-model="book.seconder" placeholder="请选择">
          <el-option
            v-for="item in secondCategoryList"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="授权开始时间">
        <el-date-picker
          v-model="book.empowerCreate"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item label="授权结束时间">
        <el-date-picker
          v-model="book.empowerEnd"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item label="连载">
        <el-select v-model="book.isSerial" clearable placeholder="请选择">
          <el-option :value="1" label="是"/>
          <el-option :value="0" label="否"/>
        </el-select>
      </el-form-item>
      <el-form-item label="全本收费">
        <el-select v-model="book.isCharge" clearable placeholder="请选择">
          <el-option :value="1" label="收费"/>
          <el-option :value="0" label="免费"/>
        </el-select>
      </el-form-item>
      <el-form-item label="原创">
        <el-select v-model="book.isOriginal" clearable placeholder="请选择">
          <el-option :value="1" label="是"/>
          <el-option :value="0" label="否"/>
        </el-select>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="book.reason" :rows="10" type="textarea"/>
      </el-form-item>
      <!-- TODO 书封 -->
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveBook()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import book from "@/api/cms/book";
  import category from "@/api/cms/category";
  export default {
     data() {
       return {
         book: {
           bookName:'',
           author:'',
           empowerCreate:undefined,
           empowerEnd:undefined,
           reason:'',
           isFirstType:'',
           isCharge:'',
           isSerial:'',
           seconder:''
         },
         saveBtnDisabled: false,
         firstCategoryList: [], // ## 一级分类封装集合
         secondCategoryList: [] // ## 二级分类封装集合
       }
     },
    created() {
       this.init()
    },
    methods: {
       init() {
         if (this.$route.params && this.$route.params.id){
           const id = this.$route.params.id
           this.view(id)
         }
       },
      view(bookId){
         book.view(bookId)
              .then(response => {
                this.book = response.data.book
                // ## 获取树形结构数据
                category.getCategoryList()
                       .then(response =>{
                         // ## 获取一级分类
                         this.firstCategoryList = response.data.items
                         // ## 获取二级分类
                         for (let i = 0; i <this.firstCategoryList.length ; i++) {
                           if (this.firstCategoryList[i].id === this.book.isFirstType){
                             this.secondCategoryList = this.firstCategoryList[i].secondCategoryList
                           }
                         }
                       })
              })
      },
      saveBook() {
         // 禁用按钮
        saveBtnDisabled: true
        //调用book.js中的修改方法
        book.update(this.book)
             .then(response => {
               // 成功后做消息提示
               this.$message({
                 type:'success',
                 message:'保存成功！'
               })
               //跳转至list页面
               this.$router.push('/cms/book/list')
             })
      },
      getSecondCategoryList(value) { // ## 获取二级分类数据
        // ## 清空二级分类数据
        this.book.seconder = ''
        for (let i = 0; i <this.firstCategoryList.length ; i++) {
          if (value === this.firstCategoryList[i].id) {
            this.secondCategoryList = this.firstCategoryList[i].secondCategoryList
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
